<template>
  <div class="contentBox padding-trbl-20">
    <div class="card1 width100">
      <el-card class="rela">
        <Title title="部门办理量统计"></Title>
        <div class="text-gray font-12 company abso">
          单位：件
        </div>
        <div class="bumen_card1Echart" id="bumen_card1Echart"></div>
      </el-card>
    </div>
    <div class="flex-row width100 margin-t-20">
      <div class="card2 margin-r-20">
        <el-card>
          <Title title="部门满意率统计"></Title>
          <div class="bumen_card2Echart" id="bumen_card2Echart"></div>
        </el-card>
      </div>
      <div class="card3">
        <el-card>
          <Title title="部门退件率统计"></Title>
          <div class="card4_r flex-row margin-t-60">
            <div class="bumen_card3Echart" id="bumen_card3Echart"></div>
            <div class="card3EchartList">
              <div
                class="card3EchartItem flex-row"
                :class="index > 0 ? 'margin-t-10' : ''"
                v-for="(item, index) in workOrderNumber"
                :key="index"
              >
                <div
                  class="card3EchartItem_l font-12 padding-l-20 rela text-gray"
                >
                  <span class="abso" :style="{ background: item.color }"></span
                  >{{ item.name }}
                </div>
                <div
                  class="card3EchartItem_c font-14 text-right text-gray flex-row"
                >
                  <div class="card3EchartItem_c_l">
                    <span
                      class="font-24 text-light-oragen line-block"
                      :style="{ color: item.color }"
                      >{{ item.value
                      }}<span class="font-12 text-gray">%</span></span
                    >
                  </div>
                  <div
                    class="card3EchartItem_c_r text-left"
                    :style="{
                      color: item.state == 'rise' ? '#FF4444' : '#25D17F'
                    }"
                  >
                    <span
                      class="font-12 line-block margin-l-20"
                      v-if="item.state == 'rise'"
                      ><img
                        src="@/assets/images/rise3.png"
                        class="trendImg"
                      />{{ item.stateVal }}%</span
                    >
                    <span class="font-12 line-block margin-l-20" v-else
                      ><img
                        src="@/assets/images/decline3.png"
                        class="trendImg"
                      />{{ item.stateVal }}%</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="width100 card4 margin-t-20">
      <el-card>
        <Title title="部门不满意统计"></Title>
        <div class="lineProgressBox pointer">
          <lineProgress2
            :unit="unitVal"
            :list="card4Data"
            @Dissatisfied="onDissatisfied"
          ></lineProgress2>
        </div>
      </el-card>
    </div>
    <div class="width100 card5  margin-t-20">
      <el-card class="rela">
        <Title title="部门处理时效统计"></Title>
        <div class="text-gray font-12 company abso">
          单位：天
        </div>
        <div class="bumen_card5Echart" id="bumen_card5Echart"></div>
      </el-card>
    </div>
    <div class="width100 card6 margin-t-20 rela">
      <el-card>
        <Title title="部门超期件统计"></Title>
        <div class="bumen_card6Echart" id="bumen_card6Echart"></div>
        <div class="echartLegendList flex-row font-12 text-gray abso">
          <div class="echartLegendItem  margin-r-30 flex-row">
            <div class="square bac_r margin-r-10"></div>
            <label>{{ nowMonth == 1 ? 12 : nowMonth - 1 }}月</label>
          </div>
          <div class="echartLegendItem flex-row">
            <div class="square bac_j margin-r-10"></div>
            <label>{{ nowMonth }}月</label>
          </div>
        </div>
      </el-card>
    </div>
    <!-- 工单列表 -->
    <el-dialog
      title="工单列表"
      width="100%"
      :visible.sync="orderListShow"
      :fullscreen="fullScreen"
      @close="clearSearch"
    >
      <orderList
        v-if="orderListShow"
        ref="orderlist"
        :duration="duration"
        :date="date"
        :nrlb="nrlb"
        :deptId="deptId"
        :orderType="orderType"
      ></orderList>
    </el-dialog>
  </div>
</template>

<script>
import Title from '@/components/title.vue'
import lineProgress2 from '@/components/lineProgress/lineProgress2.vue'
import * as echarts from 'echarts'
// 公共函数
import { sort } from '@/assets/js/public.js'

import orderList from '../reportform/order/orderlist.vue'

export default {
  components: {
    Title,
    lineProgress2,
    orderList
  },
  data () {
    return {
      workOrderNumber: [],
      card4Data: [],
      // 当前年份
      nowYear: '',
      nowMonth: 0,
      orderListShow: false,
      date: null,
      duration: null,
      deptId: null,
      orderType: null,
      nrlb: null,
      sourceId: 0,
      fullScreen: true,
      unitVal: '件'
    }
  },
  mounted () {
    const myDate = new Date()
    this.nowYear = myDate.getFullYear()
    this.nowMonth = myDate.getMonth() + 1
    this.getBmblTj()
    this.getBmMylTj()
    this.getBmThTj()
    this.getBmbmyjTj()
    this.getBmHfzqTj()
    this.getBmCqTj()
  },
  methods: {
    orderListChange (duration) {
      // 年月日类型
      this.duration = duration
      this.orderListShow = true
    },
    clearSearch () {
      this.duration = null
      this.date = null
      this.sourceId = null
      this.nrlb = null
      this.deptId = null
      this.orderType = null
    },
    // 获取数据 部门办理量统计
    async getBmblTj () {
      const that = this
      const res = await this.$api.getBmblTj()
      if (res.code === '4304') {
        this.$message({
          message: res.msg,
          type: 'warning'
        })
      }
      let resData = res
      if (!resData) return
      const bm_chartDom1 = document.getElementById('bumen_card1Echart')
      const bm_myChart1 = echarts.init(bm_chartDom1)
      const bm_option1 = {
        legend: {
          selectedMode: false,
          x: 'right',
          y: '0px',
          icon: 'rect', //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，noneit
          itemWidth: 10, // 设置宽度class
          itemHeight: 10, // 设置高度im
          itemGap: 40 // 设置间距i
        },
        dataset: {
          dimensions: resData.dimensions,
          source: resData.source
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0, // 标签设置为全部显示
            formatter: function (params) {
              var newParamsName = '' // 最终拼接成的字符串
              var paramsNameNumber = params.length // 实际标签的字数
              var provideNumber = 10 // 每行能显示的字的个数
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
              /**
               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
               */
              // 条件等同于rowNumber>1
              if (paramsNameNumber > provideNumber) {
                /** 循环每一行,p表示行 */
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = '' // 表示每一次截取的字符串
                  var start = p * provideNumber // 开始截取的位置
                  var end = start + provideNumber // 结束截取的位置
                  // 此处特殊处理最后一行的索引值
                  if (p == rowNumber - 1) {
                    // 最后一次不换行
                    tempStr = params.substring(start, paramsNameNumber)
                  } else {
                    // 每一次拼接字符串并换行
                    tempStr = params.substring(start, end) + '\n'
                  }
                  newParamsName += tempStr // 最终拼成的字符串
                }
              } else {
                // 将旧标签的值赋给新标签
                newParamsName = params
              }
              // 将最终的字符串返回
              return newParamsName
            }
          }
        },
        yAxis: {},
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            textStyle: {
              color: '#fff'
            }
          },
          formatter: function (params) {
            let res = params[0].name
            const colorList = ['#33d7e1', '#8565ff']
            params.forEach((item, index) => {
              let data = JSON.stringify(item.data)
              let newData = data.split(',')
              let numArray = ['', '']
              newData.forEach(items => {
                if (items.indexOf('月') > 0) {
                  let year = items.substr(0, items.indexOf(':'))
                  if (year.indexOf('{') == 0) {
                    year = year.substr(1, year.length)
                  }
                  year = JSON.parse(year)
                  if (year == item.seriesName) {
                    let num = items.substr(
                      items.indexOf(':') + 1,
                      items.length - items.indexOf(':')
                    )
                    if (num.indexOf('}') > 0) {
                      num = num.substr(0, num.length - 1)
                    }
                    numArray.splice(item.seriesIndex, 1, num)
                  }
                }
              })
              res +=
                '<br/><span style="display: inline-block;width:10px;height:10px;border-radius:100%;background: ' +
                colorList[index] +
                ';margin-right:5px;"></span>' +
                item.seriesName +
                '<span style="display: inline-block;width: 14px;"></span><span style="font-weight: bold;">' +
                numArray[index] +
                '</span><span style="font-size: 10px;"> 件</span>'
            })
            return res
          }
        },
        grid: {
          left: '10px',
          right: '10px',
          bottom: '10px',
          top: '60px',
          containLabel: true
        },
        series: [
          {
            type: 'bar',
            color: '#33d7e1',
            barWidth: 24,
            label: {
              show: true,
              position: 'top',
              formatter: function (params) {
                let data = JSON.stringify(params.data)
                let newData = data.split(',')
                let numArray = ['', '']
                newData.forEach(items => {
                  if (items.indexOf('月') > 0) {
                    let year = items.substr(0, items.indexOf(':'))
                    if (year.indexOf('{') == 0) {
                      year = year.substr(1, year.length)
                    }
                    year = JSON.parse(year)
                    if (year == params.seriesName) {
                      let num = items.substr(
                        items.indexOf(':') + 1,
                        items.length - items.indexOf(':')
                      )
                      if (num.indexOf('}') > 0) {
                        num = num.substr(0, num.length - 1)
                      }
                      numArray.splice(params.seriesIndex, 1, num)
                    }
                  }
                })
                if (numArray[0] > 0) {
                  return numArray[0]
                } else {
                  return ''
                }
              },
              color: '#33d7e1'
            }
          },
          {
            type: 'bar',
            color: '#8565ff',
            barWidth: 24,
            label: {
              show: true,
              position: 'top',
              formatter: function (params) {
                let data = JSON.stringify(params.data)
                let newData = data.split(',')
                let numArray = ['', '']
                newData.forEach(items => {
                  if (items.indexOf('月') > 0) {
                    let year = items.substr(0, items.indexOf(':'))
                    if (year.indexOf('{') == 0) {
                      year = year.substr(1, year.length)
                    }
                    year = JSON.parse(year)
                    if (year == params.seriesName) {
                      let num = items.substr(
                        items.indexOf(':') + 1,
                        items.length - items.indexOf(':')
                      )
                      if (num.indexOf('}') > 0) {
                        num = num.substr(0, num.length - 1)
                      }
                      numArray.splice(params.seriesIndex, 1, num)
                    }
                  }
                })
                if (numArray[1] > 0) {
                  return numArray[1]
                } else {
                  return ''
                }
              },
              color: '#8565ff'
            }
          }
        ]
      }
      bm_option1 && bm_myChart1.setOption(bm_option1)
      setTimeout(function () {
        window.onresize = function () {
          bm_myChart1.resize()
        }
      }, 100)
      bm_myChart1.on('click', function (param) {
        that.deptId = param.value.sqId
        let year = JSON.stringify(JSON.parse(that.nowYear))

        if (
          param.dimensionNames[2] == '1月' &&
          param.dimensionNames[2] != param.seriesName
        ) {
          year = parseInt(year) - parseInt(1)
        }
        let month = param.seriesName.slice(0, param.seriesName.length - 1)
        if (month.length == 1) {
          month = '0' + month
        }
        that.date = year + '-' + month
        that.orderListChange('month')
      })
    },
    // 获取数据 部门满意率统计
    async getBmMylTj () {
      const res = await this.$api.getBmMylTj()
      const resData = res
      if (!resData) return
      let echart2_label = []
      let echart2_data = []
      let echart2_data_type = []
      let echart2_data1 = []
      let bgData = []
      let fornumber = 0
      resData.forEach(item => {
        echart2_label.push(item.sqName)
        echart2_data.push(item.curPct)
        if (item.add) {
          echart2_data_type.push('rise')
        } else {
          echart2_data_type.push('decline')
        }
        echart2_data1.push(item.huanbiPct.toFixed(2))
        bgData.push(100)
      })
      const bm_chartDom2 = document.getElementById('bumen_card2Echart')
      const bm_myChart2 = echarts.init(bm_chartDom2)
      const bm_option2 = {
        grid: {
          left: '0px',
          right: '0px',
          bottom: '0px',
          top: '30px',
          containLabel: true
        },
        xAxis: {
          show: false,
          type: 'value'
        },
        yAxis: [
          {
            type: 'category',
            inverse: true,
            axisLabel: {
              show: true,
              margin: 15,
              textStyle: {
                color: '#9ba3b1'
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            data: echart2_label
          },
          {
            type: 'category',
            inverse: true,
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            data: echart2_label,
            axisLabel: {
              show: true,
              margin: 15,
              textStyle: {
                color: '#9ba3b1'
              },
              formatter: (params, index) => {
                // 计算百分比
                let type = echart2_data_type[index]
                if (type == 'rise') {
                  // 数据上升
                  return `{rise|${'↗ '}}{incrementColor|${
                    echart2_data1[index]
                  }%}`
                } else {
                  // 数据下降
                  return `{decline|${'↘ '}}{decrementColor|${
                    echart2_data1[index]
                  }%}`
                }
              },
              rich: {
                incrementColor: {
                  color: '#25d17f'
                },
                rise: {
                  color: '#25d17f',
                  fontWeight: '900',
                  fontSize: '16'
                },
                decrementColor: {
                  color: '#ff4444'
                },
                decline: {
                  color: '#ff4444',
                  fontWeight: '900',
                  fontSize: '16'
                }
              },
              textStyle: {
                fontSize: '14'
              }
            }
          }
        ],
        series: [
          {
            name: '满意率',
            type: 'bar',
            zlevel: 1,
            label: {
              show: true,
              position: ['80%', '20%'], // 位置
              color: '#ffffff',
              fontSize: 14,
              distance: 15, // 距离
              formatter: function (data) {
                return data.value + '%'
              }
            }, // 柱子上方的数值
            itemStyle: {
              normal: {
                barBorderRadius: [5, 5, 5, 5],
                color: new echarts.graphic.LinearGradient(
                  1,
                  0,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: '#23d07f'
                    },
                    {
                      offset: 0.5,
                      color: '#f1bf50'
                    },
                    {
                      offset: 1,
                      color: '#f36d6c'
                    }
                  ],
                  false
                ) // 渐变
              }
            },
            barWidth: 20,
            data: echart2_data,
            cursor: 'auto'
          },
          {
            name: '背景',
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            data: bgData,
            itemStyle: {
              normal: {
                color: '#e3e3e3',
                barBorderRadius: [5, 5, 5, 5]
              }
            },
            cursor: 'auto'
          }
        ]
      }
      bm_option2 && bm_myChart2.setOption(bm_option2)
      this.$nextTick(() => {
        setTimeout(function () {
          window.onresize = function () {
            bm_myChart2.resize()
          }
        }, 2000)
      })
    },
    // 获取数据 部门退件率
    async getBmThTj () {
      const res = await this.$api.getBmThTj()
      const resData = res
      if (!resData) return
      const colorList = [
        '#ee9a96',
        '#c49ef9',
        '#64b4f9',
        '#99a3f8',
        '#55c7e3',
        '#e1e2e3'
      ]
      resData.forEach((item, index) => {
        let obj = {
          value: item.curPct.toFixed(2),
          name: item.sqName,
          color: colorList[index],
          state: item.add ? 'rise' : 'decline',
          stateVal: item.huanbiPct.toFixed(2)
        }
        this.workOrderNumber.push(obj)
      })
      const bm_chartDom3 = document.getElementById('bumen_card3Echart')
      const bm_myChart3 = echarts.init(bm_chartDom3)
      const bm_option3 = {
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            return (
              params.seriesName +
              '<br/><span style="display: inline-block;width:10px;height:10px;border-radius:100%;background: ' +
              params.color +
              ';margin-right:5px;"></span>' +
              params.name +
              '<span style="display: inline-block;width: 14px;"></span><span style="font-weight: bold;">' +
              params.value +
              '</span><span style="font-size: 10px;">%</span>'
            ) // 鼠标悬浮显示的字符串内容
          }
        },
        legend: {
          show: false,
          top: '0px',
          left: 'left',
          orient: 'vertical'
        },
        series: [
          {
            type: 'pie',
            name: '部门退件率',
            color: colorList,
            radius: '90%',
            avoidLabelOverlap: false,
            legendHoverLink: false,
            itemStyle: {
              borderRadius: 0,
              borderColor: '#fff',
              borderWidth: 5
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.workOrderNumber,
            cursor: 'auto'
          }
        ]
      }
      bm_option3 && bm_myChart3.setOption(bm_option3)
      bm_myChart3.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: 0
      }) // 设置默认高亮
      setTimeout(function () {
        window.onresize = function () {
          bm_myChart3.resize()
        }
      }, 100)
    },

    // 获取数据 部门不满意统计
    async getBmbmyjTj () {
      const res = await this.$api.getBmbmyjTj()
      const resData = res
      if (!resData) return
      const colorList = [
        '#8e5dff',
        '#5da9ff',
        '#40d9e3',
        '#22cc4e',
        '#fc1e86',
        '#ed8826',
        '#ee2626',
        '#e8ca00',
        '#b85a30',
        '#27aaa8',
        '#6b67ff',
        '#267024',
        '#6a137d',
        '#061dfb'
      ]
      resData.forEach((item, index) => {
        let imgIndex = 0
        if (index < 9) {
          imgIndex = '0' + parseInt(index + 1)
        } else if (index >= 9 < 10) {
          imgIndex = parseInt(index + 1)
        } else {
          imgIndex = index
        }
        console.log(item)

        let obj = {
          sqName: item.sqName,
          progress: item.curPct,
          state: item.add ? 'rise' : 'decline', // rise-上升，decline-下降
          stateVal:
            item.huanbiPct != 100 ? item.huanbiPct.toFixed(2) : item.huanbiPct,
          color: colorList[index],
          lineShow: true,
          barImg: require('@/assets/images/bar_' + imgIndex + '.png'),
          sqId: item.sqId
        }
        this.card4Data.push(obj)
      })
    },

    // 获取数据 部门处理时效
    async getBmHfzqTj () {
      const res = await this.$api.getBmHfzqTj()
      const resData = res
      if (!resData) return
      const bm_chartDom4 = document.getElementById('bumen_card5Echart')
      const bm_myChart4 = echarts.init(bm_chartDom4)
      const bm_option4 = {
        legend: {
          selectedMode: false,
          x: 'right',
          y: '0px',
          icon: 'rect', //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，noneit
          itemWidth: 10, // 设置宽度class
          itemHeight: 10, // 设置高度im
          itemGap: 40 // 设置间距i
        },
        dataset: {
          dimensions: resData.dimensions,
          source: resData.source
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            textStyle: {
              color: '#fff'
            }
          },
          formatter: function (params) {
            let res = params[0].name
            const colorList = ['#33d7e1', '#8565ff']
            params.forEach((item, index) => {
              let data = JSON.stringify(item.data)
              let newData = data.split(',')
              let numArray = ['', '']
              newData.forEach((items, childIndex) => {
                if (items.indexOf('月') > 0) {
                  let year = items.substr(0, items.indexOf(':'))
                  if (year.indexOf('{') == 0) {
                    year = year.substr(1, year.length)
                  }
                  year = JSON.parse(year)
                  if (year == item.seriesName) {
                    let num = items.substr(
                      items.indexOf(':') + 1,
                      items.length - items.indexOf(':')
                    )
                    if (num.indexOf('}') > 0) {
                      num = num.substr(0, num.length - 1)
                    }
                    numArray.splice(item.seriesIndex, 1, num)
                  }
                }
              })
              res +=
                '<br/><span style="display: inline-block;width:10px;height:10px;border-radius:100%;background: ' +
                colorList[index] +
                ';margin-right:5px;"></span>' +
                item.seriesName +
                '<span style="display: inline-block;width: 14px;"></span><span style="font-weight: bold;">' +
                numArray[index] +
                '</span><span style="font-size: 10px;"> 天</span>'
            })
            return res
          }
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0, // 标签设置为全部显示
            formatter: function (params) {
              var newParamsName = '' // 最终拼接成的字符串
              var paramsNameNumber = params.length // 实际标签的字数
              var provideNumber = 10 // 每行能显示的字的个数
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
              /**
               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
               */
              // 条件等同于rowNumber>1
              if (paramsNameNumber > provideNumber) {
                /** 循环每一行,p表示行 */
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = '' // 表示每一次截取的字符串
                  var start = p * provideNumber // 开始截取的位置
                  var end = start + provideNumber // 结束截取的位置
                  // 此处特殊处理最后一行的索引值
                  if (p == rowNumber - 1) {
                    // 最后一次不换行
                    tempStr = params.substring(start, paramsNameNumber)
                  } else {
                    // 每一次拼接字符串并换行
                    tempStr = params.substring(start, end) + '\n'
                  }
                  newParamsName += tempStr // 最终拼成的字符串
                }
              } else {
                // 将旧标签的值赋给新标签
                newParamsName = params
              }
              // 将最终的字符串返回
              return newParamsName
            }
          }
        },
        yAxis: {},
        grid: {
          left: '10px',
          right: '10px',
          bottom: '10px',
          top: '60px',
          containLabel: true
        },
        series: [
          {
            type: 'bar',
            color: '#33d7e1',
            barWidth: 24,
            label: {
              show: true,
              position: 'top',
              formatter: function (params) {
                let data = JSON.stringify(params.data)
                let newData = data.split(',')
                let numArray = ['', '']
                newData.forEach((items, childIndex) => {
                  if (items.indexOf('月') > 0) {
                    let year = items.substr(0, items.indexOf(':'))
                    if (year.indexOf('{') == 0) {
                      year = year.substr(1, year.length)
                    }
                    year = JSON.parse(year)
                    if (year == params.seriesName) {
                      let num = items.substr(
                        items.indexOf(':') + 1,
                        items.length - items.indexOf(':')
                      )
                      if (num.indexOf('}') > 0) {
                        num = num.substr(0, num.length - 1)
                      }
                      numArray.splice(params.seriesIndex, 1, num)
                    }
                  }
                })
                if (numArray[0] > 0) {
                  return numArray[0]
                } else {
                  return ''
                }
              },
              color: '#33d7e1'
            },
            cursor: 'auto'
          },
          {
            type: 'bar',
            color: '#8565ff',
            barWidth: 24,
            label: {
              show: true,
              position: 'top',
              formatter: function (params) {
                let data = JSON.stringify(params.data)
                let newData = data.split(',')
                let numArray = ['', '']
                newData.forEach((items, childIndex) => {
                  if (items.indexOf('月') > 0) {
                    let year = items.substr(0, items.indexOf(':'))
                    if (year.indexOf('{') == 0) {
                      year = year.substr(1, year.length)
                    }
                    year = JSON.parse(year)
                    if (year == params.seriesName) {
                      let num = items.substr(
                        items.indexOf(':') + 1,
                        items.length - items.indexOf(':')
                      )
                      if (num.indexOf('}') > 0) {
                        num = num.substr(0, num.length - 1)
                      }
                      numArray.splice(params.seriesIndex, 1, num)
                    }
                  }
                })
                if (numArray[1] > 0) {
                  return numArray[1]
                } else {
                  return ''
                }
              },
              color: '#8565ff'
            },
            cursor: 'auto'
          }
        ]
      }
      bm_option4 && bm_myChart4.setOption(bm_option4)
      setTimeout(function () {
        window.onresize = function () {
          bm_myChart4.resize()
        }
      }, 100)
    },
    // 获取数据 部门超期件
    async getBmCqTj () {
      const that = this
      const res = await this.$api.getBmCqTj()
      const resData = res
      if (!resData) return
      const bumenList = []
      const data_l = []
      const data_r = []
      const data_total = []
      const countArray = []
      const lastCountArray = []
      resData.forEach((item, index) => {
        bumenList.push(item.sqName)
        data_l.push({
          value: item.lastCount,
          moon: this.nowMonth == 1 ? 12 : this.nowMonth - 1,
          sqId: item.sqId
        })
        let obj = {
          value: item.count,
          type: item.add ? 'decline' : 'rise',
          change: item.huanbiPct,
          name: item.sqName,
          index: index,
          moon: this.nowMonth,
          sqId: item.sqId
        }
        data_r.push(obj)
        countArray.push(item.count)
        lastCountArray.push(item.lastCount)
      })
      let sortArray = countArray.concat(lastCountArray)
      resData.forEach(item => {
        data_total.push(sort(sortArray)[0])
      })
      const bm_chartDom5 = document.getElementById('bumen_card6Echart')
      const bm_myChart5 = echarts.init(bm_chartDom5)
      const bm_option5 = {
        baseOption: {
          timeline: {
            show: false,
            top: 0,
            data: []
          },
          grid: [
            // 左边柱子
            {
              show: false,
              left: '50',
              containLabel: true,
              width: '35%'
            },
            // 中间社区5%
            {
              show: false,
              left: '46%',
              width: '0%'
            },
            // 右边柱子
            {
              show: false,
              right: '150',
              containLabel: true,
              width: '35%'
            }
          ],
          xAxis: [
            {
              type: 'value',
              show: false,
              inverse: true,
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: true,
                color: '#08093f'
              },
              splitLine: {
                show: false
              }
            },
            {
              gridIndex: 1,
              show: false
            },
            {
              gridIndex: 2,
              show: false,
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: true,
                color: '#08093f'
              },
              splitLine: {
                show: false
              }
            }
          ],
          yAxis: [
            {
              type: 'category',
              inverse: true,
              position: 'right',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false
              },
              data: bumenList
            },
            {
              gridIndex: 1,
              type: 'category',
              inverse: true,
              position: 'center',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: true,
                textStyle: {
                  align: 'center',
                  color: '#c0c8d5',
                  fontSize: 18
                }
              },
              data: bumenList
            },
            {
              gridIndex: 2,
              type: 'category',
              inverse: true,
              position: 'left',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false
              },
              data: bumenList
            }
          ],
          series: []
        },
        options: [
          {
            series: [
              {
                name: '背景1',
                type: 'bar',
                barWidth: 10,
                xAxisIndex: 0,
                yAxisIndex: 0,
                z: -10,
                barGap: '-100%',
                barCategoryGap: 0,
                itemStyle: {
                  normal: {
                    barBorderRadius: 10,
                    color: '#ffffff'
                  }
                },
                label: {
                  show: false
                },
                data: data_total,
                cursor: 'auto'
              },
              {
                name: this.nowYear - 1,
                type: 'bar',
                xAxisIndex: 0,
                yAxisIndex: 0,
                barWidth: 20,
                itemStyle: {
                  normal: {
                    barBorderRadius: 10,
                    color: '#fd942d'
                  }
                },
                data: data_l,
                label: {
                  normal: {
                    show: true,
                    formatter: series => {
                      let res = series.data
                      return `${res.value}{company| 件}`
                    },
                    position: 'left',
                    rich: {
                      company: {
                        color: '#666666',
                        fontSize: 14
                      }
                    },
                    textStyle: {
                      color: '#333333',
                      fontSize: 22
                    }
                  }
                }
              },
              {
                name: '背景2',
                type: 'bar',
                barWidth: 10,
                xAxisIndex: 2,
                yAxisIndex: 2,
                z: -10,
                barGap: '-100%',
                barCategoryGap: 0,
                itemStyle: {
                  normal: {
                    barBorderRadius: 10,
                    color: '#ffffff'
                  }
                },
                label: {
                  show: false
                },
                data: data_total,
                cursor: 'auto'
              },
              {
                name: this.nowYear,
                type: 'bar',
                xAxisIndex: 2,
                yAxisIndex: 2,
                barWidth: 20,
                itemStyle: {
                  normal: {
                    barBorderRadius: 10,
                    color: '#ff3b3b'
                  }
                },
                data: data_r,
                label: {
                  show: true,
                  formatter: params => {
                    let res = params.data
                    if (res.type != 'rise') {
                      // 良性
                      return `${
                        res.value
                      }{company| 件} {increment|${'↗ '}}{incrementColor|${
                        res.change
                      }%}`
                    } else {
                      return `${
                        res.value
                      }{company| 件} {decrement|${'↘ '}}{decrementColor|${
                        res.change
                      }%}`
                    }
                  },
                  position: 'right',
                  rich: {
                    company: {
                      color: '#666666',
                      fontSize: 14
                    },
                    incrementColor: {
                      color: '#ff3a3a',
                      fontSize: 12
                    },
                    decrementColor: {
                      color: '#25d17f',
                      fontSize: 12
                    },
                    increment: {
                      color: '#ff3a3a',
                      fontWeight: '900',
                      fontSize: '16'
                    },
                    decrement: {
                      color: '#25d17f',
                      fontWeight: '900',
                      fontSize: '16'
                    }
                  },
                  textStyle: {
                    color: '#333333',
                    fontSize: 18
                  }
                }
              }
            ]
          }
        ]
      }
      bm_option5 && bm_myChart5.setOption(bm_option5)
      setTimeout(function () {
        window.onresize = function () {
          bm_myChart5.resize()
        }
      }, 100)
      bm_myChart5.on('click', function (param) {
        that.deptId = param.data.sqId
        that.orderType = 'chaoqiwancheng'
        let year = JSON.stringify(JSON.parse(that.nowYear))
        if (param.dimensionNames[2] == '1月') {
          year = parseInt(year) - parseInt(1)
        }
        let month = param.data.moon.toString()
        if (month.length == 1) {
          month = '0' + month
        }

        that.date = year + '-' + month
        that.orderListChange('month')
      })
    },

    // 部门不满意统计
    onDissatisfied (data) {
      this.deptId = data.sqId
      this.date = this.nowYear + '-' + this.nowMonth
      this.orderListChange('month')
    }
  }
}
</script>

<style lang="less" scoped>
.el-card {
  width: 100%;
  height: 100%;
}
.card1 {
  height: 400px;
  .company {
    top: 60px;
    left: 30px;
  }
  .bumen_card1Echart {
    width: auto;
    height: 340px;
  }
}
.card2 {
  width: 810px;
  height: 550px;
  .bumen_card2Echart {
    width: 760px;
    height: 500px;
  }
}
.card3 {
  width: 1050px;
  height: 550px;
  .bumen_card3Echart {
    width: 350px;
    height: 350px;
  }
  .card3EchartList {
    padding-right: 100px;
    margin-left: 110px;
    .card3EchartItem_l {
      line-height: 12px;
      width: 150px;
      span {
        display: inline-block;
        width: 13px;
        height: 13px;
        border-radius: 100%;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .card3EchartItem_c {
      margin-left: 20px;
      margin-right: 20px;
      span {
        margin-right: 6px;
      }
      .card3EchartItem_c_l,
      .card3EchartItem_c_r {
        width: 120px;
        .trendImg {
          width: 10px;
          margin-right: 5px;
        }
      }
    }
  }
}
.card5,
.card7 {
  height: 400px;
  .company {
    top: 60px;
    left: 30px;
  }
  .bumen_card5Echart,
  .shequ_card7Echart {
    width: auto;
    height: 340px;
  }
}
.card6 {
  .bumen_card6Echart {
    width: auto;
    height: 420px;
    margin: 0 auto;
  }
  .echartLegendList {
    right: 50px;
    top: 35px;
    .echartLegendItem {
      span {
        width: 10px;
        height: 10px;
      }
    }
    .echartLegendItem:nth-child(1) {
      span {
        background: #fd942d !important;
      }
    }
    .echartLegendItem:nth-child(2) {
      span {
        background: #ff3b3b !important;
      }
    }
  }
}
</style>
<style lang="less">
.card4 {
  .contentItem {
    padding-top: 30px;
    margin-right: 30px;
    width: calc((100% - 300px) / 6);
    margin-left: 30px;
  }
  .contentItem:nth-child(6) {
    margin-right: 0;
  }
  .contentItem:nth-child(1) {
    margin-left: 0;
  }
  .contentItem:nth-child(1) {
    .el-progress-bar__inner {
      background-image: linear-gradient(to right, #9162ff, #e72fe7) !important;
    }
    .round {
      border-color: #d4bdff;
    }
  }
  .contentItem:nth-child(2) {
    .el-progress-bar__inner {
      background-image: linear-gradient(to right, #2f81ed, #2ee6d9) !important;
    }
    .round {
      border-color: #b7ebe2;
    }
  }
  .contentItem:nth-child(3) {
    .el-progress-bar__inner {
      background-image: linear-gradient(to right, #40d9e3, #58fdcf) !important;
    }
    .round {
      border-color: #b7ebe2;
    }
  }
  .contentItem:nth-child(4) {
    .el-progress-bar__inner {
      background-image: linear-gradient(to right, #29cd53, #b0e82f) !important;
    }
    .round {
      border-color: #abebb7;
    }
  }
  .contentItem:nth-child(5) {
    .el-progress-bar__inner {
      background-image: linear-gradient(to right, #fc1e86, #ea2dc1) !important;
    }
    .round {
      border-color: #fda5ce;
    }
  }
  .contentItem:nth-child(6) {
    .el-progress-bar__inner {
      background-image: linear-gradient(to right, #ee8926, #eeba26) !important;
    }
    .round {
      border-color: #f8d0a8;
    }
  }
  .contentItem:nth-child(6) .line {
    display: none;
  }
}
.square {
  width: 12px;
  height: 12px;
}
.bac_j {
  background-color: #fd942d;
}
.bac_r {
  background-color: #ff3b3b;
}
.bac_r2 {
  background-color: #cd3952;
}
.bac_z {
  background-color: #a5a1ff;
}
</style>
